<template>
    <div class="keppel">
         <div class="proList">
                <div class="nodata" v-if="showTips">
                    <div class="showtip">暂无数据！</div>
                </div>
            <ul v-if="!showTips"
                v-infinite-scroll="loadMore"
                infinite-scroll-disabled="loading"
                infinite-scroll-distance="20">
                <li v-for="(item, index) in upImgList" :key="index">
                <img v-lazy="item.displayImg+'?x-oss-process=image/resize,h_400,w_200'" alt @click="catBig(index)">
                <div class="probtn">
                    <span class="votes" @click="reviewUser(item.openid)">审核通过</span>
                    <span class="catbtn" @click="noreviewUser(item.openid)">
                      审核不通过
                    </span>
                </div>
                </li>
            </ul>
            <p class="no_more_data" v-show="!isShowLoadingIcon">没有更多数据了</p>
            </div>
    </div>
</template>
<script>
import utils from "@/utils/utils";
import Cookies from "js-cookie";
import { MessageBox } from "mint-ui";
// import { InfiniteScroll} from "mint-ui";
import request from "@/utils/request";
import * as config from "./config";
export default {
    data(){
        return{
            upImgLists:[],
            loading: true, //infinite-scroll-disabled	若为真，则无限滚动不会被触发
            showTips: false,
            offset: 0,
            pageSize: 20,
            upImgList: [],
            isShowLoadingIcon:false,
        }
    },
    methods:{
        loadMore() {
            this.needReview();
        },
        // /activity/logic/needReviewJoinActUser
// 获取需要审核的用户列表
     needReview(){
        let _self =this;
            request
                .get(`${_self.global.API_TJKEPPEL_ACT_URL}activity/logic/needReviewJoinActUser`,
                {
                    offset:_self.offset,
                    size: _self.pageSize
                }).then(function(data){
                    if(data.code==0){
                        _self.loading = false;
                        _self.offset++;
                        if(data.data.total<=0){
                            _self.showTips = true
                            _self.loading = true;
                        }else {
                            _self.showTips = false;
                            _self.loading = false;
                            _self.upImgList = _self.upImgList.concat(data.data.list);
                            if (_self.upImgList.length >= data.data.total) {
                                //无更多数据
                                _self.loading = true;
                                _self.isShowLoadingIcon=false;
                            }
                        }
                    }
                });
     },
    //  审核用户/activity/logic/reviewUser
    noreviewUser(openid){
        let _self =this;
            request
                .get(`${_self.global.API_TJKEPPEL_ACT_URL}activity/logic/reviewUser`,
                {
                    openid:openid,
                    state: 2
                }).then(function(data){
                    if(data.code==0){
                        MessageBox.alert("审核不通过成功", "提示").then(function(){
                            history.go(0)
                        });
                    }
                });
        },

        reviewUser(openid){
        let _self =this;
            request
                .get(`${_self.global.API_TJKEPPEL_ACT_URL}activity/logic/reviewUser`,
                {
                    openid:openid,
                    state: 1
                }).then(function(data){
                    if(data.code==0){
                        MessageBox.alert("审核通过成功", "提示").then(function(){
                            history.go(0)
                        });
                    }
                });
        }
        
    },
    
    
    mounted(){
        this.loadMore();
    }
}
</script>
<style>
.keppel {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 13.29rem
    background-color #fff
}
.proList {
  position: absolute;
  top: 1rem;
  width: 100%;
  /* background: url('http://assets.rurushishi.com/activies/tjkeppel/1.1.jpg') no-repeat;
  background-size: 100% 100%; */
}
.proList>ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  max-height: 12rem;
  overflow-y: auto
  -webkit-overflow-scrolling touch
  padding-bottom 1rem;
}

.proList>ul>li {
  padding: 0.3rem 0.1rem;
  box-sizing: border-box;
  width: 50%;
  height: 3.3rem;
  text-align: center;
}

.proList>ul>li>img {
  width: 3rem;
  height: 2.5rem;
  margin: 0 auto;
}

.proList>ul>li .probtn {
  width: 96%;
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
}

.proList>ul>li .probtn>span {
  display: block;
}

.proList>ul>li .probtn .votes {
  width: 1.73rem;
  height: 0.73rem;
  /* color: #fff; */
  line-height: 0.73rem;
  font-size: 0.24rem;
}

.proList>ul>li .probtn .catbtn {
  width: 1.78rem;
  height: 0.73rem;
  line-height: .73rem;
  text-align: center;
  font-size: 0.24rem;
  /* border: 1px solid #d69f57; */
}
.no_more_data {
  border-bottom: none !important;
  color: #ffffff;
  width: 100%;
  text-align: center;
  justify-content: center;
  padding-top: 20px;
}  
</style>


